<template>
    <div class="app-container">
        <div class="">
          <el-form ref="form" :model="form" label-width="120px" :rules="rules">
            <el-form-item label="头像">
                <div>
                    <el-upload
                    style="width: 200px;display: inline-block;"
                    class="upload-demo"
                    :action="baseapi+'/admin/adminuploadavatar'"
                    :headers="headers"
                    name="picture"
                    :multiple="false"
                    :on-success="pictureSuccess"
                    :show-file-list="false"
                    :limit="9"
                    accept=".png, .PNG, .jpg, .JPG, .JPEG, .jpeg, .GIF, .gif"
                    >
                    <el-button size="mini" type="danger" style="margin: 0px 10px;">
                    <i class="el-icon-upload"></i>上传头像
                    </el-button>
                  </el-upload>
                </div>

                <el-image v-if="form.avatar"
                style="width: 100px; height: 100px"
                :src="form.avatar"
                :preview-src-list="[form.avatar]">
                </el-image>
            </el-form-item>

            <el-form-item label="姓名" prop="name">
                {{form.name}}
            </el-form-item>

            <el-form-item label="用户名" prop="username">
                {{form.username}}
            </el-form-item>

            <el-form-item label="角色" prop="role_name">
                {{form.role_name}}
            </el-form-item>

            <el-form-item label="操作秘钥" prop="handle_password">
                 <el-input v-model="form.handle_password" placeholder="不填默认为之前的秘钥，秘钥6-20位，由数字、字母、符号组成"></el-input>
                 <div>{{form.old_handle_password}}</div>
            </el-form-item>

            <el-form-item label="手机号" prop="phone">
                 <el-input v-model="form.phone" maxlength="11" placeholder="请输入手机号"></el-input>
            </el-form-item>

            <el-form-item label="状态">
                <span class="el-tag el-tag--success el-tag--medium el-tag--light" v-if="form.login_status == 1">正常</span>
                 <span class="el-tag el-tag--danger el-tag--medium el-tag--light" v-if="form.login_status == 0">禁用</span>
            </el-form-item>

            <el-form-item>
                <el-button size="mini" type="primary" @click="save()">
                 保存
                </el-button>
            </el-form-item>

            </el-form>
        </div>

    </div>
</template>


<script>
  import {getInfo,saveaccount} from '@/api/user'
  import { MessageBox, Message } from 'element-ui'
  import { getToken } from '@/utils/auth'

  export default {
    name: 'mine',
    components: { },
    data() {
      //验证密码
      var checkPassword = (rule, value, callback) => {
          const pwReg = /^[\\~!@#$%^&*()-_=+|{}\[\],.?\/:;\'\"\d\w]{6,20}$/

          if (value.length == 0) {
             callback()
          }  else {
            setTimeout(() => {
                if (pwReg.test(value)) {
                  callback()
                } else {
                  callback(new Error('秘钥格式不正确，密码6-20位，由数字、字母、符号组成'))
                }
            }, 100)
          }
      };
      //验证手机号的规则
      var checkPhone = (rule, value, callback) => {
        const phoneReg = /^1[2|3|4|5|6|7|8|9][0-9]{9}$/

        if (value.length == 0) {
            callback()
        } else {
            if (phoneReg.test(value)) {
                callback()
            } else {
                callback(new Error('手机号码格式不正确'))
            }
        }
      };
      return {
        baseapi: process.env.VUE_APP_BASE_API,
        headers: {'Authorization': getToken()},
        loading: false,
        form: {

        },
        rules: {
          phone: [
              { required: false, trigger: 'blur', validator: checkPhone }
          ],
          handle_password: [
            { required: false, message: '请输入操作秘钥', trigger: 'blur' },
            { trigger: 'blur', validator: checkPassword }
          ],
        },
      }
    },
    created(){
      this.getInfo();
    },
    computed: {

    },
    watch: {

    },
    methods: {
      //获得基本信息
      getInfo(id) {
        getInfo().then(response => {
          if (response.code == 200) {
            this.form = response.response;
          } else {
              this.$message({
              message: response.msg,
              type: 'error'
          });
          }
        })
      },
      //上传图片成功
      pictureSuccess(res){
            var code = res.code;
            var msg = res.msg;
            if (code == 200) {
               this.form.avatar = res.response.full_picture;
            } else {
               this.$message.error(msg);
            }
      },
      //保存信息
      save(){
        this.$refs['form'].validate((valid) => {
            if (valid) {
                saveaccount(this.form).then((res) => {
                    var code = res.code;
                    var msg = res.msg;
                    if (code == 200) {
                        this.$store.commit('user/SET_AVATAR', this.form.avatar);
                        this.$message.success(msg);
                    } else {
                        this.$message.error(msg);
                    }
                })
            }
        })
      },
    }
  }
</script>
